<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<%@taglib prefix="rich" uri="http://richfaces.org/rich" %>
<%@taglib prefix="a4j" uri="http://richfaces.org/a4j" %> 
<f:loadBundle basename="#{environmentSession.localizationSource}" var="locale"/>
<a4j:form id="form2">
    <div class="fields_input">
        <label><h:outputText value="#{locale.email}"/>: *</label>
        <h:panelGroup>
            <a4j:region>
                <h:inputText value="#{Q100Bean.userLogin}"  required="true" id="email" requiredMessage="Email :Không được trống!" validatorMessage="Email không hợp lệ!">
                    <f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]"/>
                    <a4j:support event="onblur"/>
                </h:inputText>
                <rich:message for="email" style="color:red" />
                <h:outputText value="#{Q100Bean.message}"  ></h:outputText>
                <a4j:commandButton reRender="form2" value="CheckLogin" action="#{Q100Bean.checkUserLogin}" ></a4j:commandButton>

            </a4j:region>
        </h:panelGroup>
    </div>
    <div class="fields_input">
        <label> <h:outputText value="#{locale.password}"/>: *</label>
        <h:inputSecret value="#{Q100Bean.passowrd}" id="password" styleClass="pass">
            <f:validator validatorId="passwordValidator"/>
            <f:attribute name="confirm" value="#{confirm}"/>
            <a4j:support event="onblur"/>         
        </h:inputSecret>
        <rich:message for="password" style="color:red"/>
    </div>
    <div class="fields_input">
        <label><h:outputText value="#{locale.repassword}"/>: *</label>
        <h:inputSecret binding="#{confirm}" id="confirm" styleClass="pass" value="abc123" validatorMessage="Pass & PassConrifm phải lớn hơn 5 ký tự!">
            <f:validateLength minimum="5"/>
            <a4j:support event="onblur"/>
        </h:inputSecret>
        <rich:message for="confirm" style="color:red"/>
    </div>                                    
    <div class="fields_input">
        <a4j:commandButton reRender="form2" action="#{Q100Bean.saveQ100}" value="#{locale.btnSave}" styleClass="button_save">            

        </a4j:commandButton> 
    </div>
</a4j:form>